<template>
  <div class="main">
    <ul  class="ini">
      <li v-for="v in mv" class="exploresonglist" @click.prevent="fn(v)">
        <div :style="{ backgroundImage: `url(${v.cover})` }" class="img" ></div>
        <router-link class="name" v-if="v.name!=null" to="/list" >{{v.name}}</router-link>
        <p class="des" v-if="v.description!=null">{{v.description}}</p>
      </li>
    </ul>
    <router-view/>

  </div>

</template>

<script>
export default {
  name: "Collection",
  data(){
    return{
      mv:[
        {
          cover:'',
          name:"",
          description:"",
          master:"",
        }
      ]
    }
  },
  created() {
    let _this=this;
    axios.get('http://localhost:8181/collection').then(function (resp) {
      _this.mv = resp.data
    })

  },
  methods:{
    fn(v){
      this.$store.commit('setRandomData',v);

    }
  }
}
</script>

<style scoped>
.main{
  z-index: 100;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.ini{
  display: flex;
  max-width: 1024px;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.exploresonglist{
  box-sizing: border-box;
  width: 144px;
  margin-right: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 15px;
  text-align: left;
}
.img{
  height: 144px;
  width: 144px;
  border-radius: 10px;
  background-size: contain;
}
.name{
  display: block;
  font-size: 16px;
  color: #000;
  line-height: 20px;
  padding: 0;
  margin: 15px 0 5px;
  font-weight: 600;

}
.des{
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #9b9b9b;
  line-height: 14px;
}

a{

}
* {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,PingFang SC,Source Han Sans CN,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
  font-weight: 400;
}

</style>